<template>
	<view class="dmm-container dmm-container-grey">
		<view class="card">
			<view class="userInfo">
				<image src="/static/imgs/avatar.png" mode=""></image>
				<text>{{agentInfo.agentName}}</text>
			</view>
			
			<view class="qrcode">
				<image :src="agentInfo.agentPromoteCodeImg" mode=""></image>
				<text class="tip">扫描二维码成为我的商户</text>
			</view>
		</view>
		
		<u-button type="primary" text="刷新拓展码" @click="getAgentInfo"></u-button>
	</view>
</template>

<script>
	import { mapState, mapActions } from "vuex"
	
	export default {
		data() {
			return {}
		},
		
		computed: {
			...mapState('home', ['agentInfo'])
		},
		
		methods: {
			...mapActions('home', ['getAgentInfo'])
		}
	}
</script>

<style lang="scss">
	.dmm-container {
		box-sizing: border-box;
		padding-top: 110rpx;
		
		.card {
		  margin: 0 30rpx;
		  padding: 46rpx 45rpx;
		  background: #fff;
		  border-radius: 16rpx;
		
		  .userInfo {
		    display: flex;
				flex-direction: row;
		    align-items: center;
		    margin-bottom: 67rpx;
		    image {
		      height: 128rpx;
		      width: 128rpx;
		      margin-right: 19rpx;
		    }
				
				text {
					font-size: 34rpx;
					font-weight: 700;
				}
		  }
		
		  .qrcode {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    
		    
		    image {
		      height: 512rpx;
		      width: 512rpx;
		      margin-bottom: 68rpx;
		    }
				
				text {
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
		  }
		}

		.u-button {
			margin-top: 60rpx;
			width: 240rpx;
		}
	}
</style>
